import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './styles/element-variables.scss'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import i18n from '@/lang'
import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

// import { imgerror, textcolor } from '@/directives'
// 按需在全剧中 引入 注册的时候 如果需要引入的非常多就非常麻烦 可以用下面的方法来解决
// Vue.directive('imgerror', imgerror)
// Vue.directive('textcolor', textcolor)
// 通过 全部引入到  一个对象 然后再通过循环对象的 键 和 值 来进行 循环注册 批量注册
import * as directiveObj from '@/directives'
// 这种写法比较麻烦
// for (const key in directiveObj) {
//   Vue.directive(key, directiveObj[key])
// }
// Object.keys()
// 是一个我们在写代码时非常常用的获取对象属性键值对中的键列表的方法，
// 于此同时我们会发现它返回的键数组顺序和我们申明的属性不一致 我们会得到一个数组
// 然后对这个数组进行 foreach遍历
Object.keys(directiveObj).forEach(key => Vue.directive(key, directiveObj[key]))

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

// import PageTools from '@/components/PageTools' // 注册自定义组件
// Vue.component('PageTools', PageTools)

import moment from 'moment'
import compoment from './components'// 注册自己封装的组件 插件
Vue.use(compoment) // 使用自己封装的组件 插件

// 全局过滤器 同时使用第三方Moment/days 插件
Vue.filter('formatTime', function (value, str) {
  // return moment(value).format('YYYY年MM月DD日')
  // 更具有灵活性 时间格式 靠界面传过来
  return moment(value).format(str)
 })
// 批量注册 自定义指令
import * as filter from '@/filter'
// Object.keys(directiveObj).forEach(key => Vue.directive(key, directiveObj[key]))
// 注册 打印插件
import Print from 'vue-print-nb'
Vue.use(Print)
// 注册 time 颜色选择组件
import ThemePicker from './components/ThemePicker/index.vue'
Vue.component('ThemePicker', ThemePicker)

// 配置ElementUI的中英切换逻辑
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
Object.keys(filter).forEach(key => Vue.directive(key, filter[key]))

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})
